<template>
    <div>
        <head-view class="headerView" headLeft>
            <template #headLeft>
                <div class="pl-20 fs-20 bold">成才服务平台</div>
            </template>
            <template #headRight></template>
        </head-view>
        <div class="fc-ac-jc mainView" style="height: calc(100vh - 90.13px);">
            <p class="pb-50 bold fs-15">请选择想吗反反复复付</p>
            <div class="grid-2" style="gap: 30px;">
                <div v-for="item in list" :key="item.id" class="listItem radius-20" @click="toPath(item)">
                    {{ item.title }}
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.headerView{
    background: url(@/assets/header.jpg) no-repeat;
    background-size: cover;
    color: #fff;
}
.mainView{
    margin: 0 auto;
    .listItem{
        padding: 6rem 7rem;
        border: 1PX solid  #4b42b7;
        white-space: nowrap;
        &:hover{
            background: #4b42b7;
            color: #fff;
        }
    }
}
</style>
<script setup>
import { useUserStore } from "@/store/userStore";
import { getlist } from "./index";
import { ref } from "vue";
import { list } from './data'
import { useRouter } from "vue-router";
const userStore = useUserStore();
const router=useRouter()
const toPath = (val) => {
    router.replace(val.path)
}

const data = {
    // custom_id: '55',
    archives_id: "1212208",
};
const content = ref("");
const get = async () => {
    const res = await getlist(data);
    userStore.user = res;
    content.value = res.content.content;
};
// get();
</script>
